<script setup>
import { defineProps,defineEmits } from 'vue';
import useNightModeStore from "@/stores/nightModeStore";
const nightModeStore = useNightModeStore();
const props = defineProps({
    list: Array
});
const emits=defineEmits(["showReply"]);
const coverTime=(time)=>{
    const datetime=new Date(time*1000);//不给Date()传参考当时时间
    let year=datetime.getFullYear();
    let month=datetime.getMonth()+1;
    month=month<10?"0"+month:month;
    let date=datetime.getDate();
    date=date<10?"0"+date:date;
    let  hours=datetime.getHours();
    hours=hours<10?"0"+hours:hours;
    let minutes=datetime.getMinutes();
    minutes=minutes>9?minutes:"0"+minutes;

    return `${month}-${date} ${hours}:${minutes}`;
}
const likeme=(commentid,event)=>{
        // console.log("点击的事件对象",event);
        // console.log("点击的元素对象==>",event.target);
        if(event.target.tagName!="I")return;//当点击元素不是i标签就不做反应
        let isLike=true;
        if(event.target.className=="like"){//获取被点击i元素的类名如果为like改为onclick
            event.target.className="dislike";
            isLike=true;
        }else{//当获取被点击i元素
            isLike=false
            event.target.className="like";
        }
        props.list.map(item=>{
            if(commentid==item.id){
                if(isLike) item.likes--;
                else item.likes++;
            }
        });
    }
    const clickReply=()=>{
        emits("showReply",{a:100,money:1000000});//触发自定义事件
    }
</script>
<!--
    时间戳：自1970-1- 0：0：0到现在的秒数
    js里面需要毫秒数 1s=1000ms
-->
<template>
    <ul :class="['comment-list',nightModeStore.isNight ? 'night' : '']">
        <li v-for="comment in list" :key="comment.id">
            <img class="avatar" :src="comment.avatar" />
            <div class="comment">
                <div class="nickname">
                    <span>{{ comment.author }}</span><!--名字-->
                    <div class="dot"><i></i><i></i><i></i></div><!--右边3个点-->
                </div>
                <div class="content"><!--评论内容-->
                    {{ comment.content }}
                </div>
                <div class="dateline">
                    <span class="datetime">{{ coverTime(comment.time) }}</span>
                    <div class="upmore">
                        <i class="dislike" @click="likeme(comment.id,$event)">
                            <span>{{ comment.likes }}</span>
                        </i><!--点赞-->
                        <i @click="clickReply" class="reply"></i><!--回复-->
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>
<style scoped>
.comment-list li {
    display: flex;
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #eee;
}
.comment-list .left {
    background-color: #555;
    color: #fff;
}
.comment-list .left {
    color: #000;
}

.comment-list.night {
    background-color: #555;
    color: #fff;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.comment {
    margin-left: 10px;
    width: 100%;
}

.nickname {
    display: flex;
    justify-content: space-between;
}

.nickname span {
    font-size: 13px;
}

.nickname .dot {
    display: flex;
    align-items: center;
}

.nickname .dot i{
    width: 3px;
    height: 3px;
    background-color: #a5a5a5;
    margin-right: 5px;
    border-radius: 50%;
}

.content {
    font-size: 14px;
    padding: 4px 20px 10px 0px;
}

.dateline {
    display: flex;
    justify-content: space-between;
}
.datetime{
    font-size: 13px;
    color: #aaa;
}
.upmore{
    display: flex;
}
.upmore i{
    width: 30px;
    height: 30px;
    background: url(../assets/dianzan.png) no-repeat center center;
    background-size: 20px 20px;
}
.upmore i.dislike{
    background-image: url(../assets/dianzan.png);
    position: relative;
    font-style: normal;
}
.upmore i.like{
    background-image: url(../assets/dianzan2.png);
    position: relative;
    font-style: normal;
}
.upmore i.like span,.upmore i.dislike span{
    position: absolute;
    font-size: 12px;
    color: #aaa;
    left: -10px;
    top: 7px;
}
.upmore i.like span{
    color: #f00;
}
.upmore i.reply{
    background-image: url(../assets/pinglun-pinglun-biankuang.png);
    background-size: 28px 28px;
}
</style>